<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
    <!--    引入vue路由js文件-->
    <script src="../js/vue-router.js"></script>
</head>
<body>

<!--
    路由的嵌套使用
-->

<div id="app">
    <router-view></router-view>
</div>

<script>

    // 智能穿戴
    const smartwear = {
        template: `
          <div style="width: 600px;height: 400px; border: 1px solid green">
                <h2>{{title}}</h2>
                <hr>
                <router-link to="/headset">耳机</router-link>
                <router-link to="/wear">穿戴</router-link>
                <!--设置路由出口  用于子路由的渲染-->
                   <router-view></router-view>
         </div>
      `,
        data() {
            return {
                title: '智能穿戴'
            }
        }

    }

    // 耳机
    const headset = {
        template: `
          <div style="width: 200px;height: 200px; border: 1px solid red">
              <h3>耳机</h3>
         </div>
      `
    }

    // 穿戴
    const wear = {
        template: `
          <div style="width: 200px;height: 200px; border: 1px solid red">
              <h3>穿戴</h3>
         </div>
      `
    }


    const routes = [
        {
            path: "/",
            component: smartwear,
            children:[
                {
                    path: "/headset",
                    component: headset
                },
                {
                    path: "/wear",
                    component: wear
                }
            ]
        }
    ]

    const  router = new VueRouter({
        routes
    })
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    })
</script>
</body>
</html>